<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>渠道开通</title>
  <link rel="stylesheet" type="text/css" href="layui/css/layui.css">
  <script src="layui/layui.all.js"></script>
  <script src="layui/layui.all.js"></script>
  <!-- <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> -->


</head>



<body style="background-color:rgb(248, 248, 248);">


  <form class="layui-form" style="padding: 20px;">

    <!-- action="https:www.baidu.com" -->


    <div class="layui-card">
      <div class="layui-card-header">请选择要开通的渠道( 即使开通了多个渠道, 也只能选择一个默认渠道 )</div>
      <div class="layui-card-body">
        <div class="layui-input-block">
          <input type="radio" lay-filter="radio" name="payChannel" title="兴易付" value="wft" >
          <input type="radio" lay-filter="radio" name="payChannel" title="通联支付" value="allinpay">


          <!-- 设置value="1" 可以自定义值，否则选中时返回的就是默认的on  -->
        </div>
      </div>
    </div>

    <div class="layui-form-item">
      <div class="layui-input-block">
        <!-- lay-filter 在layui中作为id -->
        <input class="layui-btn" lay-submit lay-filter="formSubmit" value="提交" type="submit">
      </div>
    </div>
  </form>



  <form action="" style="margin-left: 30px;">

    <input type="hidden" name="merchantId" id="merchantId" value="c1241234">
    <input type="hidden" name="channelId" id="channelId" value="m123412341">

    <table class="layui-table" id="merchantProductTable">
      <colgroup>
        <col width="150">
        <col width="200">
        <col>
      </colgroup>
      <thead>
        <tr>
          <th>开通服务</th>
          <th>产品名</th>
          <th>手续费</th>

        </tr>
      </thead>
      <tbody>

        <tr>
          <td> <input type="checkbox" name="checked" id=" " checked> </td>



          <td> <span class="postData">微信支付 </span>
            <input type="hidden" name="id" id="id" value="">
            <input type="hidden" name="productName" id="productName" value="微信支付">
            <input type="hidden" name="productCode" id="productCode" value="VSP501">
          </td>
          <td>费率: <input type="text" name="feeRate" id="feeRate" value="0.001"> 保底:<input type="text" name="minimumCost"
              id="minimumCost" value="0.001"> 封顶:
            <input type="text" name="cappingCost" id="cappingCost" value="0.001"> </td>
        </tr>


        <tr>

          <td> <input type="checkbox" name="checked" id=" "> </td>
          <td> 支付宝支付
            <input type="hidden" name="id" id="id" value="jldflkasjdf2" data="true">

            <input type="hidden" name="productName" id="productName" data="true" value="支付宝支付">
            <input type="hidden" name="productCode" id="productCode" data="true" value="VSP502">
          </td>
          <td>费率: <input type="text" name="feeRate" id="feeRate" data="true" value="0.001">
            保底:<input type="text" name="minimumCost" id="minimumCost" value="0.001">
            封顶:<input type="text" name="cappingCost" id="cappingCost" value="0.001" data="true"> </td>
        </tr>


      </tbody>
    </table>
    <input type="button" value="tableSubmit" class="layui-btn" id="tableSubmit">
  </form>



  <script>
    //想要全局使用jQuery, 就必须让它在外面定义
    var $;
    layui.use(['form', 'element', 'layer'], function () {
      var form = layui.form;
      var element = layui.element;
      var layer = layui.layer;
      $ = layui.jquery;





      //监听提交
      form.on('submit(formSubmit)', function (data) {
        layer.open(JSON.stringify(data.field));
        return true;
      });

    });

    function getJson() {
      var jsonStr = "{\"merchantProducts\":[";
      $('#merchantProductTable tbody').find('tr').each(function () {               //tableId 是table表格的id
        jsonStr += "{";


        $(this).find('input').each(function () {                        //获取td中input的值
          if ($(this).attr("myName")) {                                    //myName是input标签的一个自定义属性
            jsonStr += "\"" + $(this).attr("myName") + "\":\"" + $(this).val() + "\",";
          }
        })


        jsonStr = jsonStr.substring(0, jsonStr.length - 1);
        jsonStr += "},";
      })
      jsonStr = jsonStr.substring(0, jsonStr.length - 1);
      jsonStr += "]}";
      return jsonStr;
    }



    /* *
     author: wushikai
     date: 2020年7月11日
     不管你勾没勾选, 因为数据量都不是很大, 我到后台做判断;  没勾选的 check字段值是 false;
     后台代码
     */
    $("#tableSubmit").click(function () {
      var jsonStr = "[";


      var  channelIdStr="";
      var  merchantIdStr="";

      channelIdStr = " \" "+  $("#channelId").attr("name")  +" \"  :  \" "  + $("#channelId").attr("value") +"\" ,  ";
      merchantIdStr = " \" "+  $("#merchantId").attr("name")  +" \"  :  \" "  + $("#merchantId").attr("value") +"\"  , ";


      $("tbody").find("tr").each(function () {


        //console.log(   $(this).attr("name"));



        let str = "";
        $(this).find("input").each(function (index, element) {
          if (index == 0) {

            if ($(element).prop("checked") != true) {
              console.log("没有勾选");
              str = str + " \" " + "flag" + " \" " + " :\" " + "0" + "\" ,";
            } else {
              console.log("勾选了");
              str = str + " \" " + "flag" + " \" " + " :\" " + "1" + "\" ,";
            }
            // str = str + " \" " + $(element).attr("name") + " \" " + " :\" " + $(element).prop("checked") + "\" ,";

            //console.log(" \" "+ $(element).attr("name") +" \" " + " :\" " + $(element).prop("checked")  +"\" ,");
          } else {
            str = str + " \" " + $(this).attr("name") + " \" " + ": \"  " + $(this).val() + "\",";
            //console.log(" \" "+$(this).attr("name") + " \" " + ":" + $(this).val() +"\", ");
          }


        })





        str = str.slice(0, str.length - 1);
        str = "{"   +  merchantIdStr + channelIdStr    + str +   "},";
        // console.log( str  );
        jsonStr = jsonStr + str;




      });
      jsonStr = jsonStr.slice(0, jsonStr.length - 1);
      jsonStr = jsonStr + " ]";
      jsonStr = jsonStr.replace(/\s*/g, "");
      console.log(jsonStr);
    });


  </script>


</body>

</html>














<!--

 " checked "  :" false" , " id " : "  jldflkasjdf2",  " productName " : "  支付宝支付",  " productCode " : "  VSP502",  " feeRate " : "  0.001",  " minimumCost " : "  0.001",  " cappingCost " : "  0.001",

 -->
